<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<title>个人中心消息中心</title>
		<link rel="stylesheet" href="../../css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="../../css/style.css" type="text/css" charset="utf-8" />
		<style>
			.historyUi li:first-child:after { background: #999; }  .historyUi li.active:first-child:after { background: #f00; }  .historyUi li.active:after { background: #f00; }.historyUi li:after{left:0.1rem;}  .historyUi li {padding:0 0.5rem 0.2rem 0.5rem; color: #666; margin-bottom: 0.2rem;font-size: 14px; }  .historyUi li .detail p{ color: #999; }  .historyUi li.active { color: #f00 }  .historyUi li:before, .historyUi li:first-child:before { background: none; }
			.historyUi li .detail p{
				word-break: break-all;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="padding: 0.24rem 0.24rem 0 0.24rem;">
				<div class="mui-scroll historyList">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron historyUi">
						
					</ul>
				</div>
			</div> 
		</div>
	</body>

	<script src="../../js/mui.min.js"></script>
	<script src="../../js/resize.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/ajaxFun.js"></script>
	<script>
		var contentWebview = null;
		var userInfo;
		var table = document.body.querySelector('.historyUi');
		var data = {
			pageNo: 1,
			pageSize: 10,
			receiverId: ''
		};

		(function($, doc) {
			$.plusReady(function() {
				plus.nativeUI.closeWaiting();
				userInfo = app.getUser();
				data.receiverId = userInfo.loginID;
				mui.init({
					pullRefresh: {
						container: '#pullrefresh',
						down: {
							 callback: pulldownRefresh
						},
						up: { 
							contentrefresh: '正在加载...',
							callback: pullupRefresh
						}
					}
				});
				
			})
		}(mui, document))
		
		if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 100);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			

 	 
		
			function pulldownRefresh() {//下拉刷新
				mui('#pullrefresh').pullRefresh().scrollTo(0,0,100);
				setTimeout(function() {
					var url = baseUrl + 'message/get/message/page.do';
					data.pageNo=1;table.innerHTML='';
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					mui('#pullrefresh').pullRefresh().refresh(true);
					ajaxFun.postFun(url,data,'',formList);		 
				}, 500);	
			}
			
		
		function pullupRefresh() { //上拉加载
			setTimeout(function() {
				var url = baseUrl + 'message/get/message/page.do';
				ajaxFun.postFun(url,data,'',formList);
			}, 100);	
		}
		
		
		var total = 0;
		function formList(datalist, params) {
			setTimeout(function() {
				data.pageNo++;
				var list = datalist.data.dataList ? datalist.data.dataList : [];
				if(list.length > 0) {
					for(var i = 0, len = list.length; i < len; i++) {
						var temp = list[i];
						var li = document.createElement('li');
						li.className = 'historyItem';
						var html = '';
						li.setAttribute('data-id', temp.id);
						Date.prototype.format = function(format) {
							var date = {
								"M+": this.getMonth() + 1,
								"d+": this.getDate(),
								"h+": this.getHours() >= 10 ? this.getHours() : "0" + this.getHours(),
								"m+": this.getMinutes() >= 10 ? this.getMinutes() : "0" + this.getMinutes(),
								"s+": this.getSeconds() >= 10 ? this.getSeconds() : "0" + this.getSeconds(),
								"q+": Math.floor((this.getMonth() + 3) / 3),
								"S+": this.getMilliseconds()
							};
							if(/(y+)/i.test(format)) {
								format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
							}
							for(var k in date) {
								if(new RegExp("(" + k + ")").test(format)) {
									format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
										date[k] : ("00" + date[k]).substr(("" + date[k]).length));
								}
							}
							return format;
						}
						var formatData = new Date(temp.updateTime).format('yyyy-MM-dd h:m:s');
						html += '' + temp.title + ',' + formatData;
						/*判断他是否已经读过该条消息(0表示未读，1表示已读)*/
						if(temp.status == 0) {
							addClass(li, 'active');
						} else {
							addClass(li, 'open');
						}
						ajaxFun.postFun(baseUrl + 'message/get/message/content.do', {
							messageId: temp.id
						}, '', function(data) {
							if(data.data) {
								if(temp.status == 1) {
									html += '<div class="detail"><p>' + data.data.content + '</p></div>';
								} else {
									html += '<div class="detail none"><p>' + data.data.content + '</p></div>'
								}
							} else {
								html += '<div class="detail"><p></p></div>'
							}
							li.addEventListener('click', function() {
								var _self = this;
								ajaxFun.postFun(baseUrl + 'message/editStatus.do', {
									id: _self.getAttribute('data-id')
								}, '', function(d) {
									if(hasClass(_self, 'active')) {
										removeClass(_self, 'active');
									}
								})

								if(hasClass(_self, 'open')) {
									removeClass(_self, 'open');
									addClass(_self.querySelector('.detail'), 'none');
								} else {
									addClass(_self, 'open');
									removeClass(_self.querySelector('.detail'), 'none');
								}
							})
							li.innerHTML = html;
							table.appendChild(li);

						})

					}
					var liLen = document.body.querySelectorAll('.historyItem').length;
					total = datalist.data.total >= 0 ? datalist.data.total : total;
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					if(liLen >= total) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
					}
				} else {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
				}
				 
			}, 1500);
		}
	</script>

</html>